<template>
  <div>
    <more-header :title="title"></more-header>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getCoursePage"
      >
        <van-card
          v-for="(item, index) in courseList" :key="index"
          num="1"
          tags="1111"
          :price="item.sysCourse.price"
          :desc="item.sysCourse.introduction | ntroduction()"
          :title="item.sysCourse.courseName"
        >
          <div slot="thumb" class="thumb-img" @click="courseDetail(item.sysCourse.id, item.sysCourse.courseType, item.sysCourse.liveType)">
            <img :src="item.sysCourse.handcover">
          </div>
          <div slot="tags">
            <van-tag plain :type="item.sysCourse.courseType | tagsType({courseType:item.sysCourse.courseType, liveType:item.sysCourse.liveType})" >{{item.sysCourse.courseType | type({courseType:item.sysCourse.courseType, liveType:item.sysCourse.liveType})}}</van-tag>
          </div>
          <div slot="footer">
            <van-button round size="mini" @click="btnOrder(item.order.orderId, $event)" ref="btn" :type="item.order.pay === '0' ? 'danger' : 'warning'">{{item.order.pay === '0' ? '去购买' : '去学习'}}</van-button>
          </div>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
  import MoreHeader from '_c/more-header'
  export default {
    name: 'my-order',
    components: {
      MoreHeader
    },
    data() {
      return {
        title: '我的订单',
        courseList: [],
        size: 10,
        number: 1,
        options: '',
        type: '',
        img: '',
        loading: false,
        finished: false,
        isLoading: false
      }
    },
    methods: {
      getCoursePage() {
        let url = '/api/order/page'
        let params = this.$qs.stringify({
          size: this.size,
          number: this.number
        })
        this.$post(url, params).then((res) => {
          if (res.code === 0) {
            this.courseList = this.courseList.concat(res.data)
            this.number++
            this.loading = false
            if (res.data.length < this.size) {
              this.finished = true
              this.number = 1
            }
          }
        })
      },
      onRefresh() {
        this.number = 1
        let url = '/api/order/page'
        let params = this.$qs.stringify({
          size: this.size,
          number: this.number
        })
        this.$post(url, params).then((res) => {
          this.courseList = []
          if (res.code === 0) {
            this.courseList = res.data
            this.isLoading = false
            this.finished = false
          }
        })
      },
      courseDetail(id, a, b) {
        let type = ''
        if (a === '2') {
          type = 0
        } else {
          if (b === '1') {
            type = 1
          } else {
            type = 2
          }
        }
        this.$router.push({path: '/index/course-detail', query: {id: id, type: type}})
      },
      btnOrder(id, e) {
        if (e.target.innerText === '去学习') {
          console.log('去学习')
        } else {
          this.$dialog.confirm({
            title: '你确定购买该课程？',
            confirmButtonText: '去购买'
          }).then(() => {
            this.$post('/api/order/create', {courseId: id, orderRemarks: 'h5'}).then((res) => {
              if (res.code === 0) {
                this.$router.push({path: '/index/order-pay', query: {orderId: res.data}})
              } else {
                this.$toast('未知错误')
              }
            }).catch((error) => {
              if (error) {
                this.$toast('未知错误')
              }
            })
          })
        }
      }
    },
    filters: {
      ntroduction(str) {
        return str.replace(/<[^>]+>/g, '')
      },
      type(val, obj) {
        if (obj.courseType === '2') {
          return '点播'
        } else if (obj.courseType === '1' && obj.liveType === '1') {
          return '直播'
        } else if (obj.courseType === '1' && obj.liveType === '2') {
          return '小班课'
        }
      },
      tagsType(val, obj) {
        if (obj.courseType === '2') {
          return 'danger'
        } else {
          if (obj.courseType === '1' && obj.liveType === '1') {
            return 'primary'
          } else {
            return 'success'
          }
        }
      }
    }
  }
</script>

<style scoped>
  .thumb-img{
    width: 100%;
    height: 100%;
  }
  .thumb-img img{
    width: 100%;
    height: 100%;
  }
</style>
